<template>
	<div style="background-color: #171717; min-height: 100vmin;">

		<div style=" background-color: #171717; ">
			<div style="font-size: 30px; margin: 10px 20px;margin-bottom: 30px;color: #fff;">我的产品</div>

			<div style="display: flex; align-items: center;justify-content: center;width: 100%;" v-if="!havegoods">
				<div style="width: 90%;display: grid;grid-template-columns: 1fr 1fr 1fr;">
					<div v-for="(item,index) in my_goods" v-bind:key="index" class="card"
						style="height: 300px;margin-bottom: 30px;display: inline-block;margin-right: 30px;">
						<div class="card__content">
							<div
								style="position: relative;color: #fff;padding-top: 10px;height: 60%;border-radius:  15px 15px 0 0;">
								<div
									style="position: absolute;top: 10px;right: 20px;display: flex;font-size: 14px;color: #006eff;">
									<div
										style="position: relative; width: 70px; font-size: 14px; left: 40px;top: -10px;">
										<div
											style="position: relative;z-index: 2; left: 20px;align-items: center;margin-top: 10px;">
											<div v-if="item.runStatus === 0" style="display: flex;align-items: center;">
												<img src="./image/运行中.png" style="height: 15px;width: 15px;" />
												&nbsp;运行中
											</div>
											<div v-else style="display: flex;align-items: center;">
												<img src="./image/已停止.png" style="height: 15px;width: 15px;" />
												&nbsp;已停止
											</div>
										</div>
									</div>
									<div style="margin-left:5px">
										<div style="position: relative;z-index: 2;top:30px; color: #006eff;border: 1px solid #006eff;padding: 2px 5px;border-radius:5px ; cursor: pointer;"
											@click="toManage(item.encryptRobotId)">
											管理
										</div>
									</div>
								</div>
								<div
									style="display: flex; position:relative; width: 90%; height: 70px;align-items: center;justify-content: center; padding-left: 20px; font-size: 30px;font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
									<div>{{item.robotName}}</div>
								</div>
								<div
									style=" width: 100%;display: flex; justify-content: center;flex-direction: column; align-items: center;">
									<div style="width: 90%;">
										<div style=" font-size: 14px; margin: 10px 0 15px 20px;">
											服务器ID : {{item.encryptRobotId}}
										</div>
										<div style="font-size: 12px;font-weight: 600; margin: 10px 0 15px 20px;">
											<i class="iconfont  el-CPU" /> CPU : {{item.core}}核
										</div>
										<div style="font-size: 12px;font-weight: 600; margin: 10px 0 15px 20px;">
											<i class="iconfont  el-neicuntiao" style="" /> 内存 :
											{{item.memory}} MB
										</div>
										<div style="font-size: 12px;font-weight: 600; margin: 10px 0 15px 20px;">
											<i class="iconfont   el-cipan " style="" /> 系统盘 : {{item.dataDiskSize}} GB
										</div>
										<div style="margin: 20px 0 20px 18px; font-size: 12px; font-weight: 600; ">
											<i class="iconfont  el-IP-copy" style="" /> 公网IP : {{item.ip}}
										</div>
										<div
											style=" margin-left: 20px;font-size: 12px; font-weight: 600; color: #fff; margin-top: 20px;">
											<i class="iconfont  el-tubiao-72" style="" /> 到期时间 ：{{item.expireTime}}
										</div>
									</div>

								</div>

							</div>
						</div>

					</div>
				</div>
			</div>
			<div v-else style="margin: 5% 3%;color: #fff;">
				<h1>看起来你还没有拥有虚拟主机..</h1>
				<div>高性能稳定虚拟主机，支持主流宝塔/EP面板，一键开站，简单易用<br />
					在此之上，我们集成了免费一键安装程序，云备份等高级功能，一键式操作，强大的性能，实惠的价格，为您保驾护航。<br />
					适用于开设网站等多种云服务。
				</div>
				<div class="buy_button" @click="toBuy()">前往购买</div>
			</div>
		</div>

	</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import {
		getMachineInfoByUserId
	} from '../../api/work.js';
	export default {

		data() {
			return {
				userid: '',
				my_goods: [],
				havegoods: '',
			};
		},
		computed: {
			// 计算属性  
		},
		mounted() {
			this.JudgingLogin();
			this.userid = localStorage.getItem('userid')
			this.getAllMyGoods();
		},
		beforeDestroy() {

		},
		methods: {
			getAllMyGoods() {
				let data = {
					userid: this.userid
				}
				// 根据用户id 获取所有信息
				getMachineInfoByUserId(data).then(response => {
					// 请求成功，处理返回的数据
					if (response.data.length === 0) {
						console.log('没东西啊兄弟', response)
						this.havegoods = true
					} else {
						this.my_goods = response.data
						console.log("我的铲平")
						console.log(this.my_goods)
					}
				}).catch(error => {
					// 请求失败，处理错误信息  
					this.error = error;
				});



			},
			handleClick() {
				alert('button click');
			},
			toManage(e) {
				this.$router.push({
					path: '/demo/controll/',
					query: {
						data: e
					}
				})
			},
			toBuy() {
				this.$router.push('/demo/goods')
			},
			// 判断登录
			JudgingLogin() {
				console.log("登录信息")
				console.log(localStorage.getItem("LZY-TOKEN"))
				// 弹出提示框 ，请先登录
				if (localStorage.getItem("LZY-TOKEN") == null) {
					this.openLoginMessage()
				}

			},
			openLoginMessage() {
				this.$alert('还未登录，请先登录！', '登录提醒', {
					confirmButtonText: '确定',
					callback: action => {
						this.$router.push({
							path: '/login',
						})
					}
				});
			}
		}
	};
</script>

<style scoped>
	.el-dropdown {
		vertical-align: top;
	}

	.el-dropdown+.el-dropdown {
		margin-left: 15px;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.switch {
		--button-width: 2.5em;
		--button-height: 1.2em;
		--toggle-diameter: 1em;
		--button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
		--toggle-shadow-offset: 10px;
		--toggle-wider: 3em;
		--color-grey: #cccccc;
		--color-green: #4296f4;
	}

	.slider {
		display: inline-block;
		width: var(--button-width);
		height: var(--button-height);
		background-color: var(--color-grey);
		border-radius: calc(var(--button-height) / 2);
		position: relative;
		transition: 0.3s all ease-in-out;
	}

	.slider::after {
		content: "";
		display: inline-block;
		width: var(--toggle-diameter);
		height: var(--toggle-diameter);
		background-color: #fff;
		border-radius: calc(var(--toggle-diameter) / 2);
		position: absolute;
		top: var(--button-toggle-offset);
		transform: translateX(var(--button-toggle-offset));
		box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
		transition: 0.3s all ease-in-out;
	}

	.switch input[type="checkbox"]:checked+.slider {
		background-color: var(--color-green);
	}

	.switch input[type="checkbox"]:checked+.slider::after {
		transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
		box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
	}

	.switch input[type="checkbox"] {
		display: none;
	}

	.switch input[type="checkbox"]:active+.slider::after {
		width: var(--toggle-wider);
	}

	.switch input[type="checkbox"]:checked:active+.slider::after {
		transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
	}

	.card {
		height: 254px;
		border-radius: 20px;
		padding: 5px;
		box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
		background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);

	}

	.card__content {
		background: rgb(5, 6, 45);
		border-radius: 17px;
		width: 100%;
		height: 100%;
	}

	.buy_button {
		margin-left: 0;
		margin-top: 35px;
		margin-bottom: 10px;
		display: flex;
		width: 30%;
		background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
		border: none;
		height: 33px;
		padding: 0 15px 0 15px;
		border-radius: 0.5rem !important;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-family: 'Avalors Personal Use';
		letter-spacing: 5px;
		color: #FFFFFF;
		text-shadow: 0 0 4px white;
		cursor: pointer;
	}
</style>